<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .red {
        background-color: red;
    }

    .green {
        background-color: green;
    }
</style>
<body>

<div id="aaa">
    <input type="button" value="红色" @click="clickMe1">
    <input type="button" value="绿色" @click="clickMe2">
    <input type="button" value="点我换颜色" @click="flag = !flag">

    <div style="width: 100px;height: 100px;" v-bind:class="bg">
        {{bg}}
    </div>
    <!--<div style="width: 100px;height: 100px;" v-bind:class="{'red':flag,'green':!flag}">
        {{bg}}
    </div>-->
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    let dataobj = {
        bg: 'red',
        flag:true
    };
    let aa = new Vue({
        el: "#aaa",
        data: dataobj,
        methods: {
            clickMe1() {
                this.bg = 'red'
            },
            clickMe2(){
                this.bg='green'
            }

        }
    })
</script>